<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础</title>
    <style>
        p {
            /* 文字颜色 */
            color: red;
            /* 字体大小 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: skyblue;
            /* 宽度 */
            width: 90%;
            /* 对于独占一行的元素而言设定的是与父标签的左距离，对于非独占一行的元素而言设定的是与上一个标签的左距离 */
            margin-left: 5%;
        }
    </style>
</head>
<body>
    <h1>一、基础认知</h1>
    <strong>
        <p>
            目标：理解CSS的作用，了解CSS语法规则，知道CSS的引入方式及其区别
        </p>
    </strong>
    <ul>
        <li>
            学习路径
            <ol>
                <li>CSS初识</li>
                <li>CSS引入方式</li>
            </ol>
        </li>
    </ul>
    <h2>1.1 CSS的介绍</h2>
    <ul>
        <li>CSS(Cascading style sheets):层叠样式表</li>
        <li>CSS作用是什么？</li>
    </ul>

    <p>
        网页被分为三层，分别是：结构层、表现层、行为层。每一层都需要用不同的语言来完成不同的工作。其中，结构层使用HTML语言来定义网页的结构，定义结构相当于“画骨”。表现层则使用CSS来定义这个“结构”中的各个部分要显示在哪里，要显示成什么样子，相当于“画皮”。但是，只有结构和表现的网页是一个“静态网页”，就相当于一个只有骨架和皮囊的人，这样的人是一个植物人。为了让这个植物人“活”起来，或者说让这个人“有灵魂”，那这个人还要具备行为能力。同样地，对于网页而言，需要具备行为能力才能称之为“动态页面”。为了给这个“皮囊”赋予灵魂，我们后续还需要使用JavaScript语言，来定义网页的行为层，使之成为一个“活着的”网页。
    </p>
    <ul>
        <li>CSS的语法规则：</li>
        <li>CSS写在哪里：</li>
        <li>CSS怎么写：</li>
    </ul>
    <p>CSS写在Style标签中，Style标签写在head标签里。写法是先通过选择器标记适用范围，然后通过一对大括号包括一组各式各样的样式。每项样式均由名称冒号值分号的格式进行定义。</p>

</body>
</html>